<template>
    <div class="flex-1 flex flex-col min-h-0">
        <el-table
            v-loading="pager.loading"
            :data="pager.lists"
            size="large"
            class="mt-4"
            style="height: 100%"
        >
            <el-table-column label="订单编号" prop="order_sn" width="200" />
            <el-table-column label="会员等级" prop="package_name" min-width="100" />
            <el-table-column label="会员时长" prop="package_name" min-width="100" />
            <el-table-column label="有效期至" prop="package_end_time" min-width="100" />
            <el-table-column label="支付方式" prop="pay_way" min-width="100" />
            <el-table-column label="实付金额" prop="paid_amount" min-width="100">
                <template #default="scope: { row: SubscribeBillingResponse }">
                    ￥{{ scope.row.paid_amount }}
                </template>
            </el-table-column>
            <el-table-column label="支付状态" prop="pay_status" min-width="100">
                <template #default="scope: { row: SubscribeBillingResponse }">
                    <el-tag type="success">{{ scope.row.pay_status }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="支付时间" prop="pay_time" min-width="175" />
        </el-table>
        <div v-if="pager.lists.length > 0" class="flex justify-end my-4">
            <paging
                v-model="pager"
                layout="prev, pager, next"
                @change="queryLists"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { usePaging } from '@/composables/usePaging'
import subscribeApi from '~/api/subscribe/index'

const { pager, queryLists } = usePaging({
    fetchFun: subscribeApi.billing
})

onMounted(async () => {
    await queryLists()
})
</script>
